<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>自定义指令</h1>
    <input type="text" v-focus>
    <!-- <div v-abc:font-size="50">haha</div>
    <div v-abc:font-size="100">haha</div> -->

    <div v-abc:style.red.50>haha</div>
    <div v-abc:style.blue.100>haha</div>
    <div v-abc:style.green.30>haha</div>
  </div>

  <script src="../Vue.js"></script>

  <script>
  const { createApp } = Vue;
  
  createApp({
    data() {
      return {
        count: 10
      }
    },
    directives: {
      // 在模板中启用 v-focus
      // key表示的是指令的名字
      focus: {
        mounted: (el) => el.focus()
      },
      abc: {
        // 在绑定元素的 attribute 前
        // 或事件监听器应用前调用
        // created(el, binding, vnode) {
        //   // 下面会介绍各个参数的细节
        // },
        // // 在元素被插入到 DOM 前调用
        // beforeMount(el, binding, vnode) {},
        // 在绑定元素的父组件
        // 及他自己的所有子节点都挂载完成后调用
        mounted(el, binding, vnode) {
          console.log(el);
          console.log(binding);
          // console.log(binding.arg);
          // console.log(binding.value);
          const [size, color] = Object.keys(binding.modifiers);
          el.style.color = color;
          el.style.fontSize = size + 'px';
        },
        // 绑定元素的父组件更新前调用
        // beforeUpdate(el, binding, vnode, prevVnode) {},
        // // 在绑定元素的父组件
        // // 及他自己的所有子节点都更新后调用
        // updated(el, binding, vnode, prevVnode) {},
        // // 绑定元素的父组件卸载前调用
        // beforeUnmount(el, binding, vnode) {},
        // // 绑定元素的父组件卸载后调用
        // unmounted(el, binding, vnode) {}
      }
    }
  }).mount('#app')
</script>
</body>
</html>